import React, {Component} from 'react'
import {Table, Breadcrumb, Select, Button, Popconfirm} from 'tinper-bee'
import {
    getSignInProjectReDetailData,
    getSignInCompReDetailData
} from './signinredetailconfig'
import './index.less';
import App from "../../layout/App";
import {
    vendorsDanger,
    vendorsFmtDate,
    vendorsSetStorage,
    vendorsGetStorage,
    vendorsGetTId
} from 'utils/config.js';
import RangePicker from "../../components/RangePicker/index.jsx";
import {getPrintCode} from "../SignInReport/signInreportconfig";

export default class SignInReport extends Component {
    constructor(props) {
        super(props);
        let _me = this;
        this.comColumns = [
            {title: "日期", dataIndex: "day", key: "day", width: '10%'},
            {title: "项目名称", dataIndex: "projectName", key: "projectName", width: '22%'},
            {title: "最早签到时间/地址", dataIndex: "earliestAndPos", key: "earliestAndPos", width: '29%'},
            {
                title: "最晚签到时间/地址", dataIndex: "latestAndPos", key: "latestAndPos", width: '29%',
                render(text, rec, index) {
                    return (_me.showHtml(text, '异常'))
                }
            },
            {
                title: "时长", dataIndex: "hours", key: "hours", width: '10%',
                render(text, rec, index) {
                    let latestAndPos = rec.latestAndPos;
                    if(latestAndPos&&!text){
                        return <span>无</span>
                    }
                    return (_me.showHtml(text, '无'))
                }
            }
        ];
        this.proColumns = [
            {title: "日期", dataIndex: "day", key: "day", width: '10%'},
            // {title: "姓名", dataIndex: "projectName", key: "projectName", width: '22%'},
            {title: "最早签到时间/地址", dataIndex: "earliestAndPos", key: "earliestAndPos", width: '35%'},
            {
                title: "最晚签到时间/地址", dataIndex: "latestAndPos", key: "latestAndPos", width: '35%',
                render(text, rec, index) {
                    return (_me.showHtml(text, '异常'))
                }
            },
            {
                title: "时长", dataIndex: "hours", key: "hours", width: '20%',
                render(text, rec, index) {
                    let latestAndPos = rec.latestAndPos;
                    if(latestAndPos&&!text){
                        return <span>无</span>
                    }
                    return (_me.showHtml(text, '无'))
                }
            }
        ];
        this.compTitle = '企业:';
        this.proTitle = '项目:';
        this.compTitleContent = 'enterpriseName';
        this.proTitleContent = 'projectName';
        this.state = {
            columns: this.comColumns,
            tableData: [],
            titleContent: '',
            title: '',
            curFlag: 'comp',
            totalHours: '',
            userName: '',
            userRole: ''
        }
    }

    showHtml = (text, showKey) => {
        let showH = null;
        if (text) {
            showH = <span>{text}</span>
        } else {
            showH = <span style={{color: '#D0021B'}}>{showKey}</span>
        }
        return showH
    };

    componentDidMount() {
        //获取页面初始值
        this.getDetailPageData()
    }

    getDetailPageData = () => {
        let {detAjaxParams, stateParams, record} = vendorsGetStorage('singInRePageData');
        let {curFlag} = stateParams;
        if (curFlag == 'comp') {
            this.setState({
                title: this.compTitle,
                userName: record['userName'],
                totalHours: record['totalHours'],
                titleContent: record[this.compTitleContent],
            });
            //获取列表信息
            this.getSignInReDetailAction(curFlag, detAjaxParams, getSignInCompReDetailData)
        } else {
            this.setState({
                title: this.proTitle,
                userName: record['userName'],
                totalHours: record['totalHours'],
                titleContent: record[this.proTitleContent],
                curFlag,
                userRole: this.setUserRole(record)
            });
            //获取列表信息
            this.getSignInReDetailAction(curFlag, detAjaxParams, getSignInProjectReDetailData)
        }
    };
    getSignInReDetailAction = (curFlag, detAjaxParams, callback) => {
        callback && callback(detAjaxParams).then((res) => {
            let data = res.data;
            if (data.resultCode !== 'busi_ex') {
                let result = data.result;
                let params = {
                    tableData: this.setShowTableData(result),
                }
                if (curFlag == 'project') {
                    params.columns = this.proColumns
                }
                this.setState(params)
            } else {
                vendorsDanger({'text': data.exMsg})
            }
        })
    };
    setShowTableData=(result)=>{
        let day = result[0].day;
        for (let i = 0; i < result.length; i++) {
            const resultI = result[i];
            if(i>0){
                if(day === resultI.day){
                    result[i].day = '';
                }else {
                    day = resultI.day
                }
            }
        }
        return result
    };
    setUserRole = (record) => {
        let userRole = record['userRole'];
        if (userRole === 0) {
            userRole = '项目经理'
        } else if (userRole === 10) {
            userRole = '业主方'
        } else if (userRole === 20) {
            userRole = '施工方'
        } else if (userRole === 30) {
            userRole = '监理方'
        }
        return userRole
    };

    componentWillUnmount() {

    };

    toSignInReport = () => {
        return "/signinreport.html"
    };
    printAction=()=>{
        vendorsGetTId().then((tenantId)=>{
            let {detAjaxParams} = vendorsGetStorage('singInRePageData');
            let params = detAjaxParams;
            let boCode = 'pm_signin_user_project';
            let printUrl = '/signInStatistic/printUserByProject';
            if(this.state.curFlag == 'comp'){
                boCode = 'pm_signin_user_enterprise';
                printUrl = '/signInStatistic/printUserByEnt'
            }
            getPrintCode({
                'isAjax': 1, ieStamp: new Date().getTime(), boCode, tenantId
            }).then(function (response) {
                if (response.data.resultCode != 'busi_ex') {
                    let data = response.data.result;
                    let url = `./print/preview?serverUrl=${printUrl}&printcode=${data}&tenantId=${tenantId}&sendType=2&params=${JSON.stringify(params)}`;
                    window.open(encodeURI(url));
                } else {
                    vendorsDanger({ 'text': response.data.exMsg });
                }
            });
        })
    };
    render() {
        let {curFlag, columns, tableData, titleContent, title, totalHours, userName, userRole} = this.state;
        return (
            <App>
                <div className='report-sign-in-detail'>
                    <div className='detail-nav'>
                        <Breadcrumb>
                            <Breadcrumb.Item href={this.toSignInReport()}>
                                签到管理
                            </Breadcrumb.Item>
                            <Breadcrumb.Item active>
                                个人签到
                            </Breadcrumb.Item>
                        </Breadcrumb>
                    </div>
                    <div className='detail-header clearfix'>
                        <div className='detail-header-info clearfix'>
                            <div className='detail-header-content detail-header-left'>
                                <span>{title}</span>
                                <span className='detail-content'>{titleContent}</span>
                            </div>
                            <div className='detail-header-p-info'>
                                <div className='detail-header-content'>
                                    <span className='detail-key'>姓名:</span>
                                    <span className='detail-content'>{userName}</span>
                                </div>
                                {
                                    curFlag === 'project' ? <div className='detail-header-content'>
                                        <span>角色:</span>
                                        <span className='detail-content'>{userRole}</span>
                                    </div> : null
                                }
                                <div className='detail-header-content'>
                                    <span>合计时长:</span>
                                    <span className='detail-content'>{totalHours}</span>
                                </div>
                            </div>
                        </div>
                        <Button
                            className="search--btn"
                            colors="primary"
                            onClick={this.printAction}
                        >打印考勤记录</Button>
                    </div>
                    <div className='detail-footer'>
                        <Table
                            columns={columns}
                            data={tableData}
                            emptyText={() => '暂无数据'}
                            scroll={{y: 460}}
                            bordered
                            // rowKey={this.setRowKey}
                        />
                    </div>
                </div>
            </App>
        )
    }
}
